<template>
  <!-- 添加或修改岗位对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="选择文章模版"
    width="500px"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="postRef" label-width="80px">
      <el-form-item label="文章模版" prop="title">
        <el-select v-model="templateType" placeholder="请选择文章模版" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
// 1. 正确定义 props
const props = defineProps({
  dialogShow: {
    type: Boolean,
    required: true,
    default: false,
  },
});
// 2. 定义组件内部的对话框显示状态
const dialogVisible = ref(false);

// 3. 监听父组件传入的 dialogShow
watch(
  () => props.dialogShow,
  (newVal) => {
    dialogVisible.value = newVal;
    console.log(dialogVisible.value, "dialogVisible");
  }
);

// 4. 定义 emit 以便向父组件通知状态变化
const emit = defineEmits(["update:dialogShow", "getTemplateType"]);

// 5. 关闭对话框时通知父组件
const handleClose = () => {
  dialogVisible.value = false;
  emit("update:dialogShow", false);
};
const templateType = ref("");
const options = [
  {
    value: "1",
    label: "图文展示模版",
  },
  {
    value: "2",
    label: "图文交叉模版",
  },
];

const submitForm = () => {
  emit("getTemplateType", templateType.value);
  console.log(templateType.value);
  dialogVisible.value = false;
};
const cancel = () => {
  dialogVisible.value = false;
};
</script>
